<!--
 * @Author: ljc
 * @Date: 2024-12-02 16:37:14
 * @LastEditors: g05047
 * @LastEditTime: 2025-01-17 09:09:08
 * @Description: 分类管理抽屉表格
-->
<template>
  <div style="padding: 0 8px">
    <rk-grid ref="tableRef"
      :="tableAttrs"
      :params="tableParams"
      :columns="tableColumns">
      <template #toolbar_left>
        <el-input v-model="tableParams.keywords"
          style="width: 200px"
          clearable
          placeholder="请输入名称"
          @change="handleSearch" />
      </template>
      <template #toolbar_right>
        <el-button v-for="(item, index) in toolbarEnums"
          :key="index"
          :type="item.type"
          @click="toolbarHandle(item)">{{ item.name }}</el-button>
      </template>
      <template #operation="{row}">
        <el-button v-for="(item, index) in rowFuncEnums"
          :key="index"
          :type="item.type"
          link
          @click.stop="rowFuncHandle(item, row)">
          {{ item.name }}
        </el-button>
      </template>
      <!-- <template #status="{row}">
        <el-switch active-value="1"
          inactive-value="0"
          v-model="row.status"
          @change="(value)=>rowFuncHandle(rowKQEnums.KQ, row,value)" />
      </template> -->
    </rk-grid>
    <CategoryEditDialog ref="categoryEditRef"
      :funcType="funcType"
      @confirm="handleConfirm" />
  </div>
</template>

<script setup>
import { useCategoryApi } from '@/api';
import { ref, reactive, } from 'vue'
import CategoryEditDialog from '../dialogs/CategoryEditDialog.vue'
import { RkConfirmBox } from '@/components/message-box/index.js';
import { ElMessage } from 'element-plus';

const { disableOrEnableClassify, deleteSysClassify } = useCategoryApi()
const props = defineProps({
  funcType: {
    type: String,
    default: '1'
  },
})
const reloadTree = inject("reloadTree")
const sendReloadTree = () => {
  reloadTree()
}
// 表格Ref对象
const tableRef = ref(null)
const tableAttrs = reactive({
  dataUrl: '/classify/getSysClassifyList',
  // keyField: 'guid',
  autoLoad: true,
  boxConfig: false,
  pagerConfig: false,
  treeConfig: {
    rowField: 'guid',
    expandAll: true,
    transform: true,
    accordion: true,
    parentField: 'superguid'
  },
  seqConfig: false,
})
// 表格参数
const tableParams = reactive({
  type: props.funcType,
  keywords: undefined,
})
// 表格字段
const tableColumns = reactive([
  { type: 'seq', width: 70, title: '序号', align: 'center', fixed: 'left' },
  { field: 'name', treeNode: true, title: '名称', align: 'left', width: 200, headerAlign: 'center' },
  { field: 'code', title: '编码', align: 'left', width: 150, headerAlign: 'center' },
  // {
  //   field: 'status',
  //   title: '有效',
  //   width: 100,
  //   align: 'center',
  //   slots: { default: 'status' },
  // },
  { field: 'operation', title: '操作', fixed: 'right', width: 150, showOverflow: true, align: 'center', slots: { default: 'operation' } },
])
/**
/**
 * 表格的查询方法
 */
const handleSearch = () => {
  tableRef.value?.searchEvent()
}
// 行操作的枚举数据
const rowFuncEnums = {
  BJ: { code: 'BJ', name: '编辑', type: 'primary', },
  SC: { code: 'SC', name: '删除', type: 'danger', func: deleteSysClassify },
}
// 行操作的枚举数据
const rowKQEnums = {
  KQ: { code: 'KQ', name: '', type: 'warning', func: disableOrEnableClassify },
}
// 功能栏的按钮枚举
const toolbarEnums = {
  XJ: { code: 'XJ', name: '新建', type: 'primary' },
}
const categoryEditRef = ref(null)
/**
 * 新建编辑和删除方法和
 */
const rowFuncHandle = (item, row, value) => {
  const { code } = item
  let params = {}
  switch (code) {
    case rowFuncEnums.BJ.code:
      categoryEditRef.value.handleEdit(row.guid)
      break;
    case rowFuncEnums.SC.code:
      params = {
        guid: row.guid,
        type: props.funcType,
      }
      handleFunction(item, row, params)
      break;
    case rowKQEnums.KQ.code:
      item.name = row.status === "1" ? '开启' : '禁用'
      params = {
        guid: row.guid,
        status: row.status,
      }
      handleFunction(item, row, params, value)
      break;
    default:
      break;
  }
}
const toolbarHandle = (item) => {
  switch (item.code) {
    case toolbarEnums.XJ.code:
      categoryEditRef.value.handleAdd()
      break;
    default:
      break;
  }
}
/**
 * 
 * @param item 每一个操作对象
 * @param row 行数据
 * @param params 入参
 *  @param value  开关值入参  
 */
const handleFunction = (item, row, params, value) => {
  RkConfirmBox({
    title: '提示',
    content: `您确定要${item.name}吗？`,
    onSubmit: async () => {
      const result = await item.func(params)
      const { code, msg } = result;
      if (code === 200) {
        ElMessage.success(`${item.name}成功！`)
        sendReloadTree()
        handleSearch()
      } else {
        ElMessage.error(msg)
      }
    },
    onCancel: () => {
      row.status = value === '1' ? '0' : '1'
    },
  })
}
/**
 * 确认方法
 */
const handleConfirm = () => {
  sendReloadTree()
  handleSearch()
}
</script>
<style lang="scss" scoped>
</style>